const n = `
<template>
  <s-form label-width="8em" colon="：">
    <s-form-item label="文本框主题">
      <s-radio-group v-model="options.theme" :options="themeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="文本排列方向">
      <s-radio-group v-model="options.align" :options="alignList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否显示图标">
      <s-radio-group v-model="options.icon" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否无边框">
      <s-radio-group v-model="options.borderless" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否显示前缀">
      <s-radio-group v-model="options.prefix" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否显示后缀">
      <s-radio-group v-model="options.suffix" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否限制长度">
      <s-radio-group v-model="options.maxlength" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否可以清空">
      <s-radio-group v-model="options.clearable" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否可联想">
      <s-radio-group v-model="options.association" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否只读">
      <s-radio-group v-model="options.readonly" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否禁用">
      <s-radio-group v-model="options.disabled" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="文本框示例">
      <s-input
        v-model="options.value"
        :placeholder="options.association ? '请输入“测试”' : '请输入内容'"
        :maxlength="options.maxlength ? 20 : undefined"
        :icon="options.icon ? 'edit-pencil-line-01' : undefined"
        :theme="options.theme"
        :align="options.align"
        :clearable="options.clearable"
        :borderless="options.borderless"
        :association="options.association ? handleInputAssociate : undefined"
        :readonly="options.readonly"
        :disabled="options.disabled"
      >
        <template v-if="options.prefix" #prefix>网址：</template>
        <template v-if="options.suffix" #suffix>.com</template>
      </s-input>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  INPUT_THEME_DEFAULT,
  INPUT_THEME_LABEL,
  INPUT_THEME_OPTIONS,
  type InputValue,
  TEXT_ALIGN_DEFAULT,
  TEXT_ALIGN_LABEL,
  TEXT_ALIGN_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultInput extends Vue {
  /**
   * @description: 主题列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = INPUT_THEME_OPTIONS.map((theme) => ({
    value: theme,
    label: INPUT_THEME_LABEL.get(theme),
  }));

  /**
   * @description: 排列方向列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly alignList = TEXT_ALIGN_OPTIONS.map((align) => ({
    value: align,
    label: TEXT_ALIGN_LABEL.get(align),
  }));

  /**
   * @description: 是否列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly isOrNotList = [
    { value: true, label: "是" },
    { value: false, label: "否" },
  ];

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    value: null, // 文本内容
    theme: INPUT_THEME_DEFAULT, // 文本框主题
    align: TEXT_ALIGN_DEFAULT, // 文本排列方向
    borderless: false, // 是否不显示边框
    icon: true, // 是否显示图标
    maxlength: true, // 是否有最大输入限制
    clearable: true, // 是否可清空
    prefix: false, // 是否显示前缀
    suffix: false, // 是否显示后缀
    association: false, // 是否可以联想
    readonly: false, // 是否只读
    disabled: false, // 是否禁用
  };

  /**
   * @description: 处理输入框联想
   * @private
   * @param {InputValue} value - 输入框的值
   * @returns {Array<string>}
   */
  handleInputAssociate(value: InputValue): Promise<string[]> {
    return new Promise<string[]>((resolve) => {
      setTimeout(() => {
        if (typeof value === "string" && value.includes("测试")) {
          resolve(new Array(12).fill("").map((_, index) => \`联想测试数据 \${index}\`));
        } else {
          resolve([]);
        }
      }, 1000);
    });
  }
}
<\/script>
`; export { n as default };
